<template>
  <div id="district-box">
    <div class="module-title">
      <i class="title-tip"></i> <span>行政区拥堵情况</span>
    </div>
    <div class="tab-title">
      <template v-for="td in cur_state === 'real'?tHead:history_Head">
        <span :class="[td==='行政区拥堵指数'?'left':cur_state === 'history'&& td==='排名'?'rank1':'']" v-if="(cur_index_type ==='01'||td!=='标准差')&&(history_type !=='year'||td!=='上月环比')">{{td}}</span>
      </template>
    </div>
    <NoData v-if="districtList.length === 0"/>
    <EasyScrollbar :barOption="listBar">
      <div :style="{height:listH + 'px'}">
        <table :class="cur_state === 'history'&&cur_index_type!=='01'?'shortTab':cur_state === 'history'?'normalTab':''">
          <!--<thead>-->
          <!--<tr>-->
          <!--<th v-for="td in tHead" :class="{left:td==='行政区拥堵指数'}">{{td}}</th>-->
          <!--</tr>-->
          <!--</thead>-->
          <tbody>
          <tr v-for="district in districtList" :class="[district.cnname === activeDis?'active':'']">
            <td :class="[cur_state === 'history'?'rank1':'','rank']">{{district.cnname === '全市' ? '-' : district.rank}}</td>
            <td :class="[district.cnname === activeDis?'active':'','left']">
          <span :class="[indexClass(district.index),'progress']" :style="{width:proWidth(district.index)}"
                @click="setCurStrict(district)" :title="district.cnname+','+district.index">
            <span class="left">{{district.cnname}}</span>
            <span class="right">{{cur_index_type=='01'?district.index.toFixed(2):district.index.toFixed(1)}}<span v-if="cur_index_type!=='01'">%</span></span>
          </span>
            </td>
            <td :class="[changeClass(district.daychange),yestClass]" v-if="cur_state === 'real'">
              {{formatIndex(district.daychangepercent)}}<span v-if="isShow(district.daychangepercent)">%</span>
            </td>
            <td :class="[changeClass(district.weekchange),'week']" v-if="cur_state === 'real'">
              {{formatIndex(district.weekchangepercent)}}<span v-if="isShow(district.weekchangepercent)">%</span>
            </td>
            <td :class="[changeClass(district.monthchange),'month']" v-if="cur_state === 'real'">
              {{formatIndex(district.monthchangepercent)}}<span v-if="isShow(district.monthchangepercent)">%</span>
            </td>
            <td :class="[changeClass(district.yearchange),history_type === 'month'?'year1':'year2']" v-if="cur_state === 'history'">
              {{formatIndex(district.yearchangepercent)}}<span v-if="isShow(district.yearchangepercent)">%</span>
            </td>
            <td :class="[changeClass(district.monthchange),'month1']" v-if="cur_state === 'history'&& history_type ==='month'">
              {{formatIndex(district.monthchangepercent)}}<span v-if="isShow(district.monthchangepercent)">%</span>
            </td>
            <td v-if="cur_index_type ==='01'" :class="[history_type === 'month'?'stat1':'stat2','stat']">{{district.standard || district.standard===0 ? district.standard.toFixed(1) : '-'}}</td>
            <td class="speed">{{district.speed ? district.speed.toFixed(1) : '-'}}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </EasyScrollbar>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import eventBus from '../../util/event-bus';
  import ColorHelper from '../../util/colpor-helper';
  import NoData from './NoData'
  export default {
    name: 'DistrictBox',
    data () {
      return {
        listH: '200px',
        tHead: ['排名', '行政区拥堵指数', '昨日环比', '上周同比', '月均比', '标准差', '均速km/h'],   //时空拥堵无标准差
        history_Head: ['排名', '行政区拥堵指数', '上年同比', '上月环比', '标准差', '均速km/h'],   //时空拥堵无标准差
        progressMax: 120,
        indexMax: 1.5,
        activeDis: '全市',
        listBar: {
          barColor: "#537185",   //滚动条颜色
          barWidth: 5,           //滚动条宽度
          railColor: "#405569",     //导轨颜色
          barMarginRight: 0,     //垂直滚动条距离整个容器右侧距离单位（px）
          barMaginBottom: 0,     //水平滚动条距离底部距离单位（px)
          barOpacityMin: 0.2,      //滚动条非激活状态下的透明度
          zIndex: "auto",        //滚动条z-Index
          autohidemode: true,     //自动隐藏模式
          horizrailenabled: false,//是否显示水平滚动条
        },
        yestClass:'yest2',  //是否有标准差的单元格宽度
      }
    },
    mounted(){
      this.$nextTick(() => {
        this.listH = this.cur_state == 'real' ? (document.body.clientHeight - 552) / 2 - 25 : (document.body.clientHeight - 679) / 2 - 25;
      });
      eventBus.$on("screenHChanged",(screenHeight) => {
        this.listH = this.cur_state == 'real' ? (document.body.clientHeight - 552) / 2 - 25 : (document.body.clientHeight - 679) / 2 - 25;
      });
    },
    components:{
      NoData,
    },
    props: {
      districtList: {
        type: Array
      },
    },
    computed: {
      ...mapGetters(['cur_city', 'cur_index_type', 'cur_district', 'cur_state', 'district_index_max','history_type']),
    },
    methods: {
      ...mapMutations(['updateCurCity', 'updateIndexMax', 'updateCurDistrict']),
      changeClass(item){
        return item && item>0?'red':'green';
      },
      indexClass(item){
        return ColorHelper.setIndexColor(item, this.cur_index_type);
      },
      isShow(item){
          return item && item!==100;
      },
      /*formatIndex: (item) => {
        if (item || item===0) {
          return parseFloat(item) > 0 ? '+' + item.toFixed(1) : item.toFixed(1)
        } else {
          return '-';
        }
      },*/
      formatIndex(offset){
        let sign = offset > 0 ?'': offset < 0 ? '-':'';
        let count = Math.abs(offset);
        return !offset || offset === 100 ? '-'
          :count.toFixed(3) == 0.000 ? 0
          :count.toFixed(2) == 0.00 ?sign + count.toFixed(3)
          :count.toFixed(1) == 0.0 ?sign + count.toFixed(2)
          :Math.round(count) == 0 ?sign + count.toFixed(1)
           :sign + Math.round(count);
      },
      proWidth(index){
        return this.progressMax * index / this.district_index_max + 'px';
      },
      setCurStrict(item){
        let code = item.cnname === '全市' ? this.cur_city.code : item.code;
        this.updateCurDistrict({
          name: item.cnname,
          code: code
        });
        this.activeDis = item.cnname;

      }
    },
    watch: {
      cur_state(curVal, oldVal){
        if (curVal !== oldVal) {
          this.listH = curVal == 'real' ? (document.body.clientHeight - 552) / 2 : (document.body.clientHeight - 679) / 2;
        }
      },
      cur_index_type(curVal, oldVal){
        if (curVal !== oldVal) {
          if (curVal !== '01') {
            this.yestClass =  'yest1';
          } else {
            this.yestClass = 'yest2';
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../common/common.scss";

  #district-box {
    .tab-title {
      width: calc(100% - 14px);
      margin-left: 7px;
      opacity: 0.5;
      font-weight: normal;
      line-height: 26px;
      display: flex;
      span {
        flex-grow: 1;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &.left {
          flex-grow: 1;
          width: 120px;
        }
        &.rank1{
          max-width: 30px;
        }
      }
    }
    .module-title {
      height: 28px;
      line-height: 28px;
      @include backdropBlur;
      background-color: rgba(0, 0, 0, 0.21);
      margin-top: 8px;
      .title-tip {
        float: left;
        width: 20px;
        height: 100%;
        background: url("../../../static/images/road/Four@2x.png") no-repeat center;
        margin: 0 2px 0 6px;
      }
      span {
        opacity: 0.6;
      }
    }
    table {
      width: calc(100% - 14px);
      margin-left: 7px;
      border: none;
      border-collapse: collapse;
      &.normalTab{
        tbody{
          tr{
            td{
              &.left {
                width: 140px;
                span{
                  margin-left: 10px;
                }
              }
              &.year1 {
                min-width: 55px;
              }
              &.month1 {
                min-width: 55px;
              }
              &.year2 {
                min-width: 90px;
              }
              &.stat1{
                width: 50px;
              }
            }
          }
        }
      }
      &.shortTab{
        tbody{
          tr{
            td{
              &.left {
                width: 160px;
                &>span{
                  margin-left: 30px;
                }
              }
              &.year1 {
                min-width: 65px;
              }
              &.month1 {
                min-width: 65px;
              }
              &.year2 {
                min-width: 100px;
              }
            }
          }
        }
      }
      thead {
        tr {
          display: flex;
          th {
            flex-grow: 1;
            opacity: 0.5;
            font-weight: normal;
            line-height: 26px;
            &.left {
              flex-grow: 2;
            }
          ;
          }
        }
      }
      tbody {
        tr {
          display: flex;
          td {
            /*flex-grow: 1;*/
            text-align: center;
            opacity: 0.8;
            line-height: 28px;
            border-collapse: collapse;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            &.red {
              color: $font-red;
              opacity: 1;
            }
            &.green {
              color: $font-green;
              opacity: 1;
            }
            &.left {
              text-align: left;
              width: 125px;
            }
            &.rank {
              width: 26px;
            }
            &.yest1 {
              width: 80px;
            }
            &.yest2 {
              width: 50px;
            }
            &.week {
              width: 48px;
            }
            &.month {
              width: 48px;
            }
            &.stat {
              min-width: 40px;
            }
            &.speed {
              flex-grow: 1;
            }
            &.year1 {
              min-width: 65px;
            }
            &.month1 {
              min-width: 65px;
            }
            &.year2 {
              min-width: 110px;
            }
            &.stat2 {
              min-width:45px;
            }
            .progress {
              float: left;
              border-radius: 0 10px 10px 0;
              height: 18px;
              line-height: 18px;
              opacity: 0.8;
              cursor: pointer;
              margin-left: 5px;
              margin-top: 5px;
              min-width: 86px;
              overflow: hidden;
              &.redIndex {
                background-color: $bg-red;
              }
              &.lineIndex {
                background-color: $bg-line;
              }
              &.yellowIndex {
                background-color: $bg-yellow;
                color: #ae582f;
              }
              &.greenIndex {
                background-color: $bg-green;
              }
              &.baseIndex {
                background-color: $bg-base;
              }
              .left {
                float: left;
                margin-left: 5px;
                width: 36px;
                overflow: hidden;
              }
              .right {
                float: right;
                margin-right: 6px;
                span{
                  font-size: 10px;
                  transform: scale(0.8);
                }
              }
            }
            &.active {
              .progress {
                opacity: 1;
                font-weight: bold;
              }
            }
          }
          &:hover {
            background-color: #314556;
            td {
              .progress {
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }
</style>
